<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="案例展示">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 搜索 -->
		<view class="liucheng d-flex align-items justify-content-center">
			<view class="search">
				<u-search placeholder="请输入要查询的内容" placeholderColor="#C9CDD4" :actionStyle="actionStyle" shape="square"
					v-model="keyword" @search="search" @custom="custom" @clear="clear"></u-search>
			</view>
		</view>
		<!-- tabs -->
		<view class="tabs-w">
			<view class="anliList">
				<u-tabs :list="anli_list" lineWidth="48rpx" :current="current" lineColor="#FF6400" :activeStyle="{
			    color: '#FF6400',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" @click="anli_click"></u-tabs>
			</view>
		</view>
		<!-- 公司条件筛选 -->
		<!-- <view class="d-flex align-items juese">
			<view class="d-flex align-items">
				<view :class="juese_current == index1 ? 'juese_name-xz' : 'juese_name'" :current="juese_current" @click="jueseClick(juese)" v-for="(juese,index1) in jueseItem" :key="index1">{{juese.name}}</view>
			</view>
		</view> -->
		<view class="w-690">
			<view class="fengge-list">
				<view class="choose-fengge margin-top-30" @click="go_detail(fengGe)"
					v-for="(fengGe,index1) in feng_ge_lists" :key="index1">
					<image :src="fengGe.zhutu_firsturl" v-if="fengGe.infotype_id == 5" mode="widthFix" class="fenggeImg"></image>
					<image :src="fengGe.anli_images_firsturl" v-if="fengGe.infotype_id == 7" mode="widthFix" class="fenggeImg"></image>
					<image :src="fengGe.zhutu_images_firsturl" v-if="fengGe.infotype_id == 8 || fengGe.infotype_id == 6" mode="widthFix" class="fenggeImg"></image>
					<view class="fengge-t">{{fengGe.content2.title}}</view>
					<view class="type-list d-flex align-items">
						<view class="type-list-m" v-if="fengGe.mianji">{{fengGe.mianji}}m²</view>
						<view class="type-list-m" v-if="fengGe.jinshen">长{{fengGe.jinshen}}m</view>
						<view class="type-list-m" v-if="fengGe.miankuan">宽{{fengGe.miankuan}}m</view>
						<view class="type-list-m" v-if="fengGe.price">{{fengGe.price}}万</view>
						<view class="type-list-m" v-if="fengGe.yusuan">{{fengGe.yusuan}}万</view>
						<view class="type-list-m" v-if="fengGe.huxingname">{{fengGe.huxingname}}</view>
						<view class="type-list-m" v-if="fengGe.fenggename">{{fengGe.fenggename}}</view>
						<view class="type-list-m" v-if="fengGe.jiegouname">{{fengGe.jiegouname}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getXinxilist,
		getusergroup
	} from '../../api/user'
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#FF6400',
					fontSize: '30rpx',
				},
				// juese_current: 0,
				// jueseItem: [{
				// 		id: 0,
				// 		name: '设计师',
				// 	},
				// 	{
				// 		id: 1,
				// 		name: '雇主',
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '公司',
				// 	}
				// ],
				current:0,
				anli_list: [],
				feng_ge_lists: [],
				page:1,
				limit:7,
			}
		},
		async onLoad(option) {
			await this.get_juese_list()
			let type_id = []
			if(option.zhuti) {
				type_id = option.zhuti
				console.log("1111111", type_id)
				this.current = this.anli_list.findIndex(item => item.id == type_id);
			}
			this.get_anli_list()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search(e) {
				console.log("eaa", e);
				this.get_anli_list()
				this.page = 1
			},
			custom(e){
				this.get_anli_list()
				this.page = 1
			},
			clear(e){
				this.get_anli_list()
				this.page = 1
			},
			jueseClick(e) {
				this.juese_current = e.id
			},
			anli_click(item) {
				console.log('item', item);
				this.current = item.index
				this.get_anli_list()
			},
			go_detail(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/anli_detail?content_id=' + e.content_id
				})
			},
			// 获取角色信息列表
			async get_juese_list(){
				var data = {
					infotype_id:'5,6,7,8'
				}
				await getusergroup(data).then(res => {
					console.log("案例展示",res);
					if(res.code == 1){
						this.anli_list = res.data.group
					}
				})
			},
			// 获取信息列表
			get_anli_list(){
				console.log("88888888", this.anli_list);
				
				var data = {
					page: this.page,
					limit: this.limit,
					type:'5,6,7,8',
					key: this.keyword,
					group_id: this.anli_list[this.current].id,
				}
				getXinxilist(data).then(res => {
					console.log("的发生大法师", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.feng_ge_lists = res.data.list
						} else {
							this.feng_ge_lists = this.feng_ge_lists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
		}
	}
</script>

<style>
	.type-list {
		margin-left: 20rpx;
		padding-bottom: 40rpx;
		flex-wrap: wrap;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #FF4D4F;
		border-radius: 4.5px;
		background: #FDF2F2;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.fengge-t {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 50rpx;
		color: #333333;
		margin: 27rpx 0 10rpx 20rpx;
	}

	.fenggeImg {
		width: 690rpx;
		display: block;
	}

	.choose-fengge {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 25rpx;
	}

	.anliList {
		width: 690rpx;
		margin: auto;
	}

	.tabs-w {
		width: 750rpx;
		height: 103rpx;
		background-color: #fff;
		margin-top: 10rpx;
	}

	.juese_name-xz {
		font-size: 30rpx;
		font-weight: normal;
		color: #FF6400;
		margin-right: 40rpx;
	}

	.juese_name {
		font-size: 30rpx;
		font-weight: normal;
		color: #1D2129;
		margin-right: 40rpx;
	}

	.juese {
		width: 690rpx;
		margin: 30rpx auto;
	}

	.search {
		width: 690rpx;
		margin: auto;
	}

	.liucheng {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
	}

	page {
		background-color: #F7F8FB;
	}
</style>